<!doctype html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>进度条运动</title>
  <!--  <link rel="stylesheet" href="./styles/index.css">-->
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .bar {
    position: relative;
    width: 400px;
    height: 30px;
    margin: auto;
    border-radius: 20px;
    background: #ffba01;
  }
  .bar::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 400px;
    height: 85px;
    background: repeating-linear-gradient(45deg, #f06a0e, #f06a0e 10px, transparent 11px, transparent 19px, #f06a0e 20px);
    background-position: 0 0;
    background-repeat: no-repeat;
    animation: move 1s linear infinite;
  }

  .overflow {
    overflow: hidden;
  }

  @keyframes move {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 0 -56px;
    }
  }

</style>
<body>
<div class="bar"></div>
<div class="bar overflow"></div>
</body>
</html>
